<template>
  <div class="box">
    <div class="left">
      <h5 :class="{fenlie:true,light: clickindex == index}" v-for="(item, index) in list" :key="index" @click="fenlie(index)">
        {{ item.name }}
      </h5>
    </div>
    <div class="right">
      <p>热销</p>
      <div class="shangpin" v-for="(item, index) in rexiao" :key="index">
        <div class="zuo"></div>
        <div class="you">
          <div class="shang">
            <p>{{ item.name }}</p>
            <p>{{ item.jieshao }}</p>
            <p>{{ item.fankui }}</p>
          </div>
          <div class="xia">
            <p>￥{{ item.jiage }}</p>
            <button>＋</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clickindex: 0,
      list: [
        { id: 1, name: "热销" },
        { id: 2, name: "优惠" },
        { id: 3, name: "三文鱼" },
      ],
      rexiao: [
        {
          id: 1,
          name: "挪威三文鱼刺身",
          jieshao: "选取精品三文鱼",
          fankui: "月销40份 好评率100%",
          jiage: "45",
        },
        {
          id: 2,
          name: "挪威三文鱼刺身",
          jieshao: "选取精品三文鱼",
          fankui: "月销40份 好评率100%",
          jiage: "45",
        },
      ],
    };
  },
  methods: {
    fenlie(index) {
        this.clickindex = index
        console.log(index);
    },
  },
};
</script>

<style scoped>
*{
    box-sizing: border-box;
}
.box {
  display: flex;
}
.box .left {
  width: 25%;
  /* height: 500px; */
  /* background-color: aqua; */
}
.box .left h5 {
  font-weight: 800;
  padding-left: 20px;
  margin: 20px 0;
  color: gray;
}
.box .left .light {
  color: black;
  border-left: 5px solid red;
    padding-left: 15px;
}
/* .box .left .fenlie:nth-child(1){
    margin-top: 10px;
} */
.box .right {
  width: 75%;
  /* height: 500px; */
  /* background-color: rgb(176, 243, 218); */
}
.box .right > p {
  margin-top: 10px;
  font-size: 14px;
}
.box .right .shangpin {
  margin-top: 10px;
  display: flex;
}
.box .right .shangpin .zuo {
  width: 80px;
  height: 80px;
  background-color: pink;
}
.box .right .shangpin .you .shang p:nth-child(1) {
  font-size: 14px;
  font-weight: 800;
}
.box .right .shangpin .you .shang p:nth-child(2),
p:nth-child(3) {
  font-size: 12px;
  color: gray;
}
.box .right .shangpin .you {
  margin-left: 10px;
}
.box .right .shangpin .you .xia {
  display: flex;
  margin-top: 10px;
}
.box .right .shangpin .you .xia p {
  font-size: 14px;
  color: red;
  font-weight: 800;
}
.box .right .shangpin .you .xia button {
  text-align: center;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  border: 0;
  margin-left: 90px;
  color: white;
  background-color: blueviolet;
}
</style>